<template>
  <div style="width: 100%;">
    <!-- 当 cardList 为空时，显示居中的 el-empty -->
    <div v-if="cardList.length === 0" class="empty-container">
      <el-empty :image-size="200"></el-empty>
    </div>

    <!-- 当 cardList 不为空时，展示卡片列表 -->
    <div class="card-grid" v-else>
      <knowledge-card
        v-for="card in cardList"
        :key="card.name"
        :card="card"
        @click.native="$emit('card-click', card)"
        @loadding="$emit('loadding')"
      />
    </div>
  </div>
</template>

<script>
import { getFileListByPath } from '@/api/knowledge'
import KnowledgeCard from './KnowledgeCard.vue'

export default {
  components: { KnowledgeCard },
  data() {
    return {
      pageData: {
        current: 1,
        size: 10
      },
      cardList: [] // 知识库列表
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const that = this
      let param = {
        ...this.pageData
      }
      getFileListByPath(param).then(res => {
        if (res.data.code === 200) {
          this.cardList = res.data.data.records
        } else {
          this.cardList = []
          that.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
/* 卡片列表的网格布局 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* 自适应列数，最小宽度320px */
  gap: 20px; /* 卡片之间的间距 */
  margin-top: 24px;
}

/* 当 cardList 为空时，el-empty 居中的父容器 */
.empty-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 60vh;           /* 设置为视口高度，确保垂直居中 */
  width: 100%;
}

/* 确保 KnowledgeCard 卡片组件自适应宽度 */
.knowledge-card {
  width: 100%; /* 确保每个卡片的宽度占满网格单元 */
}
</style>
